<template>
    <div class="container">
        <a-card title="原料入库">
            <a-tabs type="card" :default-active-key="0" @change="changeTab">
                <a-tab-pane v-for="(item,i) in tabsData" :key="i" :tab="item">
                    <div class="tool-bar">
                        <div>
                            <a-input-search allowClear style="width: 200px;color: #05b089" v-model="varietyNameAndBatch" placeholder="品名/入库编号" @search="getTableData"></a-input-search>
                            <a-select allowClear style="width: 200px;color: #05b089;margin-left: 20px" v-model="enterType" placeholder="入库类型" @search="getTableData">
                                <a-select-option value="">全部</a-select-option>
                                <a-select-option value="SY">溯源入库</a-select-option>
                                <a-select-option value="NSY">非溯源入库</a-select-option>
                                <a-select-option value="CG">采购入库</a-select-option>

                            </a-select>
                            <a-button type="default" @click="varietyNameAndBatch = '';enterType = ''">重置</a-button>
                        </div>
                        <div>
                            <a-button type="primary" @click="">数据接收</a-button>
                            <a-button type="primary" @click="addEnter">新增入库</a-button>
                        </div>
                    </div>
                    <div class="table">
                        <a-table bordered :loading="tableOption.loading" :rowKey="(item,i)=>item.id" :columns="tableOption.columns" :data-source="tableOption.tableData" :pagination="tableOption.pagination">
                            <template slot='action' slot-scope="text, record, index">
                                <div>
                                    <a-button v-if="record.state == 0" style="margin-right: 10px" type="primary" @click="">编辑</a-button>
                                    <a-button v-if="record.state == 0 && record.enterStorageType == 'NSY'" style="margin-right: 10px" type="primary" @click="">填写/编辑溯源信息</a-button>
                                    <a-button v-if="record.state == 0" style="margin-right: 10px" type="primary" @click="">提交审核</a-button>
                                    <a-button style="margin-right: 10px" type="primary" @click="">详情</a-button>
                                    <a-button v-if="record.state == 1" style="margin-right: 10px" type="primary" @click="">审核</a-button>
                                    <a-button v-if="record.state == 3" style="margin-right: 10px" type="primary" @click="">驳回理由</a-button>
                                    <a-button v-if="record.state == 3" style="margin-right: 10px" type="primary" @click="">重新入库</a-button>
                                    <a-popconfirm v-if="record.state == 0" okText="确定" cancelText="取消" title="确定删除吗？" @confirm="">
                                        <a-button type="primary" @click="">删除</a-button>
                                    </a-popconfirm>
                                </div>
                            </template>
                        </a-table>
                    </div>
                </a-tab-pane>
            </a-tabs>
        </a-card>

        <a-modal :footer="null" :width="modalOption.width" v-model:visible="modalOption.visible" :title="modalOption.title">

        </a-modal>
    </div>
</template>

<script>
import locale from "ant-design-vue/lib/date-picker/locale/zh_CN";
import {h} from 'vue'
import nextApi from "@/api/nextApi";

export default {
    name: "rowMaterialIncoming",
    data() {
        return {
            varietyNameAndBatch:'',
            enterType:'',
            rawType:'中药材',
            tableOption:{
                columns:[
                    {
                        title: '序号',
                        dataIndex: 'index',
                        key: 'index',
                        align: 'center',
                        customRender: (text,record,index) => `${index+1}`,
                    },
                    {
                        align: 'center',
                        dataIndex:'varietyName',
                        key:'varietyName',
                        title:'品名',
                    },
                    {
                        align: 'center',
                        dataIndex:'enterStorageType',
                        key:'enterStorageType',
                        title:'入库类型',
                    },
                    {
                        align: 'center',
                        dataIndex:'enterStorageBatch',
                        key:'enterStorageBatch',
                        title:'入库编号',
                    },
                    {
                        align: 'center',
                        dataIndex:'enterStorageNum',
                        key:'enterStorageNum',
                        title:'入库数量',
                        customRender: (text,record) => `${record.enterStorageNum}kg`
                    },
                    {
                        align: 'center',
                        dataIndex:'massStandard',
                        key:'massStandard',
                        title:'质量标准',
                    },
                    {
                        align: 'center',
                        dataIndex:'source',
                        key:'source',
                        title:'来源',
                    },
                    {
                        align: 'center',
                        dataIndex:'state',
                        key:'state',
                        title:'状态',
                        customRender:(text)=>{
                            return text==0 ?'待入库':text==1 ?'待审核':text==2 ?'已入库':'已驳回'
                        }
                    },
                    {
                        align: 'center',
                        dataIndex:'operator',
                        key:'operator',
                        title:'操作人',
                    },
                    {
                        align: 'center',
                        dataIndex:'enterStorageTime',
                        key:'enterStorageTime',
                        title:'入库时间',
                    },
                    {
                        align: 'center',
                        dataIndex:'action',
                        key:'action',
                        title:'操作',
                        scopedSlots:{customRender:'action'}
                    },
                ],
                loading:false,
                tableData:[],
                pagination:{
                    pageSize:10,
                    current:1,
                    total:0,
                    showTotal:(total)=>`共${total}条`,
                    onChange:(page,pageSize)=>this.pageChange(page,pageSize)
                },
            },
            modalOption:{
                title:"",
                locale,
                visible:false,
                width:'80%',

            },
            //tabs数据
            tabsData:['中药材','辅料'],
        }
    },
    mounted() {
        this.getTableData()
    },
    methods: {
        async changeTab(key){
            this.rawType = this.tabsData[key]
            this.getTableData()
        },
        //新增入库
        addEnter(){

        },
        async getTableData(id){
            this.tableOption.loading = true
            let params = {
                pageNum:this.tableOption.pagination.current,
                pageSize:this.tableOption.pagination.pageSize,
                varietyName:this.varietyNameAndBatch,
                rawType:this.rawType,
                enterStorageBatch:this.varietyNameAndBatch,
                enterStorageType:this.enterType,
                id
            }
            const res =  await nextApi.getRawInboundList(params)
            console.log(res)
            this.tableOption.tableData = res.data.rows
            this.tableOption.pagination.total = res.data.total
            this.tableOption.loading = false

        },
        pageChange(page,pageSize){
            this.tableOption.pagination.current = page
            // this.getTableData()
        },
        detailView(params){
            // this.modalOption.visible = true

        },
    },
}
</script>
<style scoped lang="scss">
@import "@/assets/common/commonStyle.scss";
.container{
    padding: 20px;
    .tool-bar{
        display: flex;
        align-items: center;
        justify-content: space-between;
        span{
            padding-left: 10px;
            font-size: 18px;
        }
        button{
            margin-left: 10px;
        }
    }
    .table{
        margin-top: 20px;
    }
}
.info-box{
    padding: 10px;
    border: 1px solid rgba(70, 70, 70, 0.11);
}
.item-box{
    margin: 20px 0;
}
</style>
